<template>
  <!--工序工布-->
  <div class="app-container jc_layout_procedure">
    <el-button-group class="jc_btn_wrap jc_btn_left">
      <el-button @click="createRow"><i class="jc_icon el-icon-plus"></i>新建</el-button>
      <el-button @click="editRow"><i class=""></i>编辑</el-button>
      <el-button @click="deleteRow"><i class=""></i>删除</el-button>
    </el-button-group>
    <el-table  :height="tableHeight" @cell-click="rowsClick" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="80px">
      </el-table-column>
      <el-table-column label='名称'>
        <template scope="scope">
          <img src="../../assets/dw_icon/arrow_right.png" v-if="scope.row.status===true" class="jc_arrow">
          <img src="../../assets/dw_icon/arrow_down.png" v-else-if="scope.row.status === false" class="jc_arrow">
          <span v-else ="scope.row.status === 'isChildren'" style="color:transparent;">11</span>
          {{scope.row.processName}}
        </template>
      </el-table-column>
      <el-table-column label='编号'>
        <template scope="scope">
          {{scope.row.processsNo}}
        </template>
      </el-table-column>
      <el-table-column label='优先级'>
        <template scope="scope">
          {{scope.row.priority}}
        </template>
      </el-table-column>
      <el-table-column label='备注'>
        <template scope="scope">
          {{scope.row.remark}}
        </template>
      </el-table-column>
      <el-table-column label='创建人'>
        <template scope="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>
      <el-table-column label='创建时间'>
        <template scope="scope">
          {{scope.row.createTime}}
        </template>
      </el-table-column>
    </el-table>
    <!--新建-->
    <el-dialog title="新建工序工布" :visible.sync="create_visible" class="jc_dialog_wrap">
      <el-form :model="form_create" label-width="120px">
        <el-form-item label="父工序">
          <el-select v-model="form_create.parentId">
            <el-option v-for="item in processNameList" :value="item.id" :label="item.processName" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form_create.processName"></el-input>
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="form_create.processNo"></el-input>
        </el-form-item>
        <el-form-item label="优先级">
          <el-input v-model="form_create.priority"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form_create.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCreateForm">确定</el-button>
        <el-button @click="create_visible=false">取消</el-button>
      </div>
    </el-dialog>
    <!--编辑-->
    <el-dialog title="编辑工序工布" :visible.sync="edit_visible" class="jc_dialog_wrap">
      <el-form :model="form_edit" label-width="120px">
        <el-form-item label="父工序">
          <el-select v-model="form_edit.parentId">
            <el-option v-for="item in processNameList" :value="item.id" :label="item.processName" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form_edit.processName"></el-input>
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="form_edit.processNo"></el-input>
        </el-form-item>
        <el-form-item label="优先级">
          <el-input v-model="form_edit.priority"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form_edit.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditForm">确定</el-button>
        <el-button @click="edit_visible=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  import * as Procedure from "../../api/process/procedure";

  export default {
    components: {

    },
    data() {
      return {
        list: [],
        create_visible: false,
        edit_visible: false,
        form_create: {parentId: ''},
        form_edit: {},
        multipleSelection: [],
        processNameList: [],
      }

    },
    created() {
      this.fetchData();
      this.getProcessNameList();
    },
    methods: {
      fetchData(p=1) {
        Procedure.getTreeList().then(data => {
          this.list =data;
          for(var i=0;i<this.list.length;i++) { //所有的父集都加上向右的箭头
              if(this.list[i].parentId === 0) {
                this.list[i].status = true;
              }
              for(var j in this.list[i].children) {
                this.list[i].children[j].isChildren = true;
              }
          }
        })
      },
      rowsClick(row) { //出现或者隐藏子集
          if(row.status === true && row.isChildren != true) {//让子集不添加箭头
            for(var i in this.list) {
              if(row.id === this.list[i].id) {
                this.list[i].status = false; //点击时把向右箭头改成向下箭头
                var newValue = this.list[i];
                this.list.splice(i, 1, newValue)  //Vue 不能检测有些数组的变动所以只能用这个方法 把status变成false的视图更新
                var addPosition = Number(i) + 1 //子集要插入的位置
              }
            }
            for(var i in row.children) {
              this.list.splice(Number(i)+Number(addPosition),0 ,row.children[i]); //添加数据
            }
          }else if(row.status === false && row.isChildren != true){
            for(var i=this.list.length-1;i>= 0;i--) {
              if(row.id === this.list[i].id) {
                this.list[i].status = true; //点击时把向右箭头改成向下箭头
                var newValue = this.list[i];
                this.list.splice(i, 1, newValue)  //Vue 不能检测有些数组的变动所以只能用这个方法 把status变成false的视图更新
              }
              for(var j in row.children) {
                if(this.list[i].id ===row.children[j].id) {
                    this.list.splice(Number(i), 1);
                }
              }
            }
          }
      },
      createRow() {
          this.create_visible = true;
          this.getProcessNameList();
      },
      submitCreateForm() {
         Procedure.createRow(this.form_create).then( data => {
           this.create_visible = false;
           this.fetchData();
         })
      },
      editRow() {
        if(this.multipleSelection.length === 0) {
          alert('请先勾选行');
        }else if(this.multipleSelection.length >= 2) {
          alert('每次最多勾选一行');
        }else if(this.multipleSelection.length === 1){
            this.edit_visible = true;
            //无用数据太多，所以需要一个一个获取
            this.form_edit.id = this.multipleSelection[0].id;
            this.form_edit.parentId = this.multipleSelection[0].parentId;
            this.form_edit.processName = this.multipleSelection[0].processName;
            this.form_edit.processNo = this.multipleSelection[0].processNo;
            this.form_edit.priority = this.multipleSelection[0].priority;
            this.form_edit.remark = this.multipleSelection[0].remark;

        }
      },
      submitEditForm() {
        Procedure.editRow(this.form_edit).then( data => {
          this.edit_visible = false;
          this.fetchData();
        })
      },
      deleteRow() {
        if(this.multipleSelection.length === 0) {
          alert('请先勾选行');
        }else if(this.multipleSelection.length >= 2) {
          alert('每次最多勾选一行');
        }else if(this.multipleSelection.length === 1){
          this.$confirm('是否删除该条数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            Procedure.deleteRows(this.multipleSelection[0].id).then( data => {
              this.fetchData();
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });

        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      getProcessNameList() {
        Procedure.getProcessNameList().then( data => {
          this.processNameList = data;
          this.processNameList.splice(0,0,{id: 0, processName: '添加父集元素'});
        })
      }
    },
    computed: {
      tableHeight() {
        const filterHeight = 28
        var tableHeight = this.getTableHeight(filterHeight)
        return tableHeight;
      },
    }
  }
</script>
<style>
  .jc_layout_procedure .el-table .cell, .jc_layout_procedure .el-table th > div {
    cursor: pointer;
  }
</style>
